<template>
  <div class="full">
    <div class="all2">
      <div class="return"><router-link to="/login"> 返回</router-link></div>
      <div class="content2">
        <div class="register"><h1>手机号注册</h1></div>
        <div class="tel_form">
          <div class="tel_num">
            <span>+86</span
            ><input
              type="text"
              maxlength="11"
              placeholder="请输入手机号"
              class="tel_num1"
              v-model="phone"
            />
          </div>
          <input
            type="text"
            v-model="mas"
            class="yanzheng"
            placeholder=" 验证码"
          />
          <button class="get" @click="getyanzheng">获取验证码</button>

          <van-button type="primary" size="large" class="next" @click="next_to"
            >下一步
          </van-button>
        </div>
        <div class="terms">
          <span
            >注册代表你同意<a href="#">注册协议</a>和<a href="#"
              >隐私政策</a
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      mas: "",
      ma: 2324,
    };
  },
  components: { VanButton: Button },
  methods: {
    randoms() {
      let num = "";
      for (let i = 0; i < 4; i++) {
        num += parseInt(Math.random() * 10);
      }
      return num;
    },
    getyanzheng() {
      this.ma = this.randoms();
      Toast({
        message: this.ma,
        position: "bottom",
      });
    },
    next_to() {
      if (this.phone) {
        if (/^1[34578]\d{9}$/.test(this.phone)) {
          if (this.mas == this.ma) {
            localStorage.setItem("phone", this.phone);
            Toast.success("注册成功");
            this.$router.push("/akeylogin");
          } else {
            Toast.fail("验证失败");
          }
        } else {
          Toast.fail("手机有误");
        }
      } else {
        Toast.fail("手机号不可为空");
      }
    },
  },
};
</script>

<style lang="less">
html body {
  background-color: rgb(255, 255, 255);
  height: 100%;
  width: 100%;
}
.full {
  padding: 10px;
}
.all2 {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.content2 {
  margin-left: 20px;
  margin-right: 20px;
}
.return {
  font-size: 16px;
  color: rgb(138, 229, 220);
  font-weight: 600;
}
.return a {
  color: rgb(138, 229, 220);
}
/* 注册 */
.register {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-top: 30px;
}
/* 注册表单 */
.tel_form {
  margin-top: 50px;
  font-size: 16px;
}
/* 输入框 */
.tel_num {
  border: 1px solid rgb(208 206 208);
  height: 50px;
  width: 100%;
  border-radius: 5px;
}
.tel_num input {
  height: 48px;
  font-size: 16px;
  background-color: rgb(255, 255, 255);
  border: 0px;
}
.tel_num span {
  display: inline-block;
  width: 12%;
}
.tel_num1 {
  width: 88%;
}
/* 获取验证码 */
.yanzheng {
  margin-top: 10px;
  height: 50px;
  font-size: 16px;
  width: 50%;
  background-color: rgb(255, 255, 255);
  border-color: rgb(205, 206, 207);
  border-radius: 5px;
}
.get {
  width: 38%;
  height: 48px;
  margin-left: 10%;
  border-radius: 5px;
  background-color: rgb(244, 244, 244);
  border-color: rgb(205, 206, 207);
  font-weight: 600;
}
/* 按钮 */
.next {
  margin-top: 60px;
  border-radius: 5px;
  background-color: rgb(134, 217, 219);
  border-color: rgb(134, 217, 219);
}
/* 条款 */
.terms {
  text-align: center;
  margin-top: 80%;
  font-size: 15px;
}
.terms a {
  text-decoration: underline;
}
</style>
